<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信用评分系统</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body class="dark-theme">
    <header>
        <div class="container">
            <h1>信用评分系统</h1>
            <button id="logoutBtn" class="btn-secondary">退出登录</button>
        </div>
    </header>
    
    <main class="container">
        <div class="card">
            <h2>客户信用评估</h2>
            <p>请输入客户的详细信息以进行信用评分和失信评估</p>
            
            <form id="predictionForm">
                <div class="form-grid">
                    <div class="form-group">
                        <label for="age">借款人年龄</label>
                        <input type="number" id="age" name="age" min="18" max="100" required placeholder="请输入年龄">
                    </div>
                    
                    <div class="form-group">
                        <label for="NumberOfDependents">家庭成员数量(不包括本人)</label>
                        <input type="number" id="NumberOfDependents" name="NumberOfDependents" min="0" required placeholder="请输入家庭成员数量">
                    </div>
                    
                    <div class="form-group">
                        <label for="MonthlyIncome">月收入</label>
                        <input type="number" id="MonthlyIncome" name="MonthlyIncome" min="0" required placeholder="请输入月收入">
                    </div>
                    
                    <div class="form-group">
                        <label for="DebtRatio">每月负债比率(%)</label>
                        <input type="number" step="0.01" id="DebtRatio" name="DebtRatio" min="0" required placeholder="例如：0.35">
                        <span class="help-text">负债/收入的比例，例如0.35表示35%</span>
                    </div>
                    
                    <div class="form-group">
                        <label for="RevolvingUtilizationOfUnsecuredLines">可用额度与总额度之比(%)</label>
                        <input type="number" step="0.01" id="RevolvingUtilizationOfUnsecuredLines" name="RevolvingUtilizationOfUnsecuredLines" min="0" required placeholder="例如：0.8">
                        <span class="help-text">可用信用额度占总信用额度的比例</span>
                    </div>
                    
                    <div class="form-group">
                        <label for="NumberOfOpenCreditLinesAndLoans">信用在贷业务数量</label>
                        <input type="number" id="NumberOfOpenCreditLinesAndLoans" name="NumberOfOpenCreditLinesAndLoans" min="0" required placeholder="请输入数量">
                    </div>
                    
                    <div class="form-group">
                        <label for="NumberRealEstateLoansOrLines">抵押在贷业务数量</label>
                        <input type="number" id="NumberRealEstateLoansOrLines" name="NumberRealEstateLoansOrLines" min="0" required placeholder="请输入数量">
                    </div>
                    
                    <div class="form-group">
                        <label for="NumberOfTime30-59DaysPastDueNotWorse">过去两年逾期30-59天次数</label>
                        <input type="number" id="NumberOfTime30-59DaysPastDueNotWorse" name="NumberOfTime30-59DaysPastDueNotWorse" min="0" required placeholder="请输入次数">
                    </div>
                    
                    <div class="form-group">
                        <label for="NumberOfTime60-89DaysPastDueNotWorse">过去两年逾期60-89天次数</label>
                        <input type="number" id="NumberOfTime60-89DaysPastDueNotWorse" name="NumberOfTime60-89DaysPastDueNotWorse" min="0" required placeholder="请输入次数">
                    </div>
                    
                    <div class="form-group">
                        <label for="NumberOfTimes90DaysLate">逾期90天或以上次数</label>
                        <input type="number" id="NumberOfTimes90DaysLate" name="NumberOfTimes90DaysLate" min="0" required placeholder="请输入次数">
                    </div>
                </div>
                
                <button type="submit" class="btn-primary" id="submitBtn">
                    <span class="btn-text">计算信用评分</span>
                </button>
            </form>
        </div>
        
        <div id="resultCard" class="card hidden">
            <h2>评估结果</h2>
            
            <div class="result-grid">
                <div class="result-item">
                    <span class="result-label">信用评分</span>
                    <span id="creditScore" class="result-value">--</span>
                </div>
                
                <div class="result-item">
                    <span class="result-label">失信评估</span>
                    <span id="delinquentStatus" class="result-value">--</span>
                </div>
                
                <div class="result-item full-width">
                    <span class="result-label">违约概率</span>
                    <div id="riskIndicator" class="risk-indicator">
                        <div class="risk-bar">
                            <div class="risk-fill"></div>
                        </div>
                        <div class="risk-labels">
                            <span>低风险</span>
                            <span>中等风险</span>
                            <span>高风险</span>
                        </div>
                    </div>
                </div>
                
                <div class="result-item full-width">
                    <span class="result-label">评估结论</span>
                    <p id="riskConclusion" class="risk-conclusion">等待计算结果...</p>
                </div>
            </div>
        </div>
    </main>
    
    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
</html>